<template>
  <div>
    <div style="width: 100%;height:auto;text-align: center;">
      <el-button type="primary"
                 size="small"
                 @click="showSuccess()"
                 style="width: 100px"
                 plain>
        正确解析{{this.successTotal}}条
      </el-button>
      <el-button type="primary"
                 size="small"
                 @click="showError()"
                 style="width: 100px"
                 plain>
        异常情况{{this.errorTotal}}条
      </el-button>
      <el-button type="primary"
                 size="small"
                 @click="exportErrorList()"
                 style="width: 100px"
                 plain>
        导出异常记录
      </el-button>
      <div style="width: 100%;height:30px;text-align: center;">
      </div>
      <el-table :row-style="{height:'50px'}"
                :data="successTableData"
                align="center"
                style="width: 100%"
                v-if="successHide">
        <el-table-column prop="资产编码"
                         label="资产编码"
                         height="">
        </el-table-column>
        <el-table-column prop="资产名称"
                         label="资产名称">
        </el-table-column>
        <el-table-column prop="税费"
                         label="税费">
        </el-table-column>
        <el-table-column prop="登记费"
                         label="登记费">
        </el-table-column>
        <el-table-column prop="折旧状态"
                         label="折旧状态">
        </el-table-column>
        <el-table-column prop="价值"
                         label="价值">
        </el-table-column>
        <el-table-column prop="凭证号"
                         label="凭证号">
        </el-table-column>
        <el-table-column prop="凭证开始日期"
                         label="凭证开始日期">
        </el-table-column>
        <el-table-column prop="凭证结束日期"
                         label="凭证结束日期">
        </el-table-column>
      </el-table>

      <el-table :row-style="{height:'50px'}"
                :data="errorTableData"
                align="center"
                style="width: 100%"
                v-if="errorHide">
        <el-table-column prop="资产编码"
                         label="资产编码"
                         height="">
        </el-table-column>
        <el-table-column prop="资产名称"
                         label="资产名称">
        </el-table-column>
        <el-table-column prop="税费"
                         label="税费">
        </el-table-column>
        <el-table-column prop="登记费"
                         label="登记费">
        </el-table-column>
        <el-table-column prop="折旧状态"
                         label="折旧状态">
        </el-table-column>
        <el-table-column prop="价值"
                         label="价值">
        </el-table-column>
        <el-table-column prop="凭证号"
                         label="凭证号">
        </el-table-column>
        <el-table-column prop="凭证开始日期"
                         label="凭证开始日期">
        </el-table-column>
        <el-table-column prop="凭证结束日期"
                         label="凭证结束日期">
        </el-table-column>
        <el-table-column prop="errorMes"
                         label="错误信息">
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%;height:50px;text-align: center;">

    </div>
  </div>
</template>

<script>
import { exportErrorRecord } from '@/views/wy-asset-management/fixed-warehousing/api/fixed-warehousing.js'

export default {
  components: {},
  data() {
    return {
      //正确条数
      successTotal: 0,

      //异常条数
      errorTotal: 0,

      //表单数据
      successTableData: [],
      errorTableData: [],

      successHide: true,
      errorHide: false,
    }
  },
  /**
   * 载入事件
   */
  mounted() {
    this.successTotal = this.$parent.successList.length
    this.errorTotal = this.$parent.errorList.length
    this.successTableData = this.$parent.successList
    this.errorTableData = this.$parent.errorList
  },
  created() {},
  methods: {
    /**
     * 显示解析正确的数据
     */
    showSuccess() {
      this.successHide = true
      this.errorHide = false
      //this.successTableData = this.$parent.successList;
    },

    /**
     * 显示解析错误的数据
     */
    showError() {
      this.successHide = false
      this.errorHide = true
      //this.errorTableData = this.$parent.errorList;
    },

    /**
     * 导出异常记录
     */
    exportErrorList() {
      console.log(123)
      exportErrorRecord(this.errorTableData).then((res) => {
        // 关闭loading
        this.loading = false
        // 此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
        // 检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
        // 另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
        const content = res.data
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = '资产入库异常记录.xls' // 导出文件名
        // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        // IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) {
          // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else {
          // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
        this.btnSendTem = false
      })
    },
  },
}
</script>
